<template>
  <div class="homeswiper">
    <swiper class="my-swipe cursor" :options="voiceSwiper" indicator-color="#E48B2C">
      <swiper-slide v-for="(item, index) in banner" :key="index">
        <img :src="item.pic" :alt="item.name" @click="handleClick(item.url)" />
      </swiper-slide>
    </swiper>
    <div class="panel-paginationh" slot="pagination"></div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"

export default {
  name: "HomeSwiper",
  components: {
    swiper,
    swiperSlide
  },
  props: {
    banner: {
      type: Array | Object,
      default: () => []
    }
  },
  data() {
    return {
      voiceSwiper: {
        slidesPerView: 1,
        slidesPerGroup: 1,
        observeParents: true,
        observer: true,
        autoplay: true,
        pagination: {
          el: ".panel-paginationh",
          clickable: true
        }
      }
    }
  },
  methods:{
    handleClick(url){
      window.location.href = url;
    },
  }
}
</script>

<style scoped>
.homeswiper {
  width: 100%;
  height: 551px;
  position: relative;
}

.panel-paginationh {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 99;
  transform: translateX(-50%);
}

.panel-paginationh /deep/ .swiper-pagination-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 16px;
  background: #ccc;
  opacity: 1;
  outline: none;
}

.panel-paginationh /deep/ .swiper-pagination-bullet-active {
  background: rgba(228, 139, 44, 0.9);
  box-shadow: 0 0 10px rgba(228, 139, 44, 0.9);
}

.my-swipe img {
  width: 100%;
  height: 551px;
  object-fit: cover;
}
</style>
